<template>
  <div class="site-center-root">
    <div class="center-content">
      <!-- 左侧卡片区 -->
      <div class="left-panel">
        <div class="card">
          <div class="card-title">接入人数趋势</div>
          <div class="trend-chart" ref="trendChart"></div>
        </div>
        <div class="card">
          <div class="card-title">用户在线时长</div>
          <div class="trend-chart" ref="onlineChart"></div>
        </div>
        <div class="card">
          <div class="card-title">时延达标率趋势</div>
          <div class="card-stats">
            平均值: 96% &nbsp; 最大值: 99.8% &nbsp; 最小值: 92%
          </div>
          <div class="trend-chart" ref="delayChart"></div>
        </div>
        <div class="card">
          <div class="card-title">丢包达标率趋势</div>
          <div class="card-stats">
            平均值: 96% &nbsp; 最大值: 99.5% &nbsp; 最小值: 90%
          </div>
          <div class="trend-chart" ref="lossChart"></div>
        </div>
  
      </div>
      <!-- 右侧地图区 -->
      <div class="map-panel">
        <div class="top-stats-bar">
          <div class="stat-item">54<br/><span>接入用户数</span></div>
          <div class="stat-item">46<br/><span>正常用户数</span></div>
          <div class="stat-item">12<br/><span>切换次数</span></div>
          <div class="stat-item highlight">26<br/><span>工单处理</span></div>
          <div class="stat-item error">11<br/><span>VIP异常用户</span></div>
        </div>
        <div class="map-echarts" ref="mapEcharts"></div>
        <!-- 站点弹窗 -->
        <div v-if="popupVisible" class="site-popup">
          <div style="font-weight:bold;margin-bottom:8px;">站点详情</div>
          <div style="margin-bottom:6px;">
            <span>站点名称：</span>{{ popupData.name }}
            <span style="margin-left:30px;">设备数量：{{ popupData.deviceCount }}</span>
          </div>
          <div style="margin-bottom:6px;">
            <span>经度：{{ popupData.lng }}</span>
            <span style="margin-left:30px;">纬度：{{ popupData.lat }}</span>
          </div>
          <div style="margin-bottom:6px;">
            <span>地址：{{ popupData.address }}</span>
          </div>
          <div style="margin-bottom:12px;">
            <span>健康度：{{ popupData.health }}</span>
          </div>
          <button @click="popupVisible=false" style="margin:0 auto;display:block;padding:4px 18px;background:#2196f3;color:#fff;border:none;border-radius:4px;cursor:pointer;">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue';
import * as echarts from 'echarts';
import china from '@/utils/china.json';

export default {
  name: 'SiteCenter',
  setup() {
    const mapEcharts = ref(null);
    const trendChart = ref(null);
    const onlineChart = ref(null);
    const delayChart = ref(null);
    const lossChart = ref(null);
    const popupVisible = ref(false);
    const popupData = reactive({
      name: '',
      deviceCount: 0,
      lng: '',
      lat: '',
      address: '',
      health: ''
    });

    // 给每个点补充详细信息（可根据实际情况调整）
    const mappoints = [
      { name: '新疆', value: [87.628579, 43.793301], itemStyle: { color: '#00EEFF' }, deviceCount: 38, address: '新疆乌鲁木齐市xxx路', health: 78 },
      { name: '四川', value: [104.076452, 30.651696], itemStyle: { color: '#00EEFF' }, deviceCount: 22, address: '四川成都市xxx路', health: 82 },
      { name: '甘肃', value: [103.826777, 36.060634], itemStyle: { color: '#00EEFF' } },
      { name: '云南', value: [102.709372, 25.046432], itemStyle: { color: '#00EEFF' } },
      { name: '广西', value: [108.327537, 22.816659], itemStyle: { color: '#00EEFF' } },
      { name: '湖南', value: [112.982951, 28.116007], itemStyle: { color: '#00EEFF' } },
      { name: '山东', value: [117.020725, 36.670201], itemStyle: { color: '#00EEFF' } },
      { name: '河南', value: [113.753094, 34.767052], itemStyle: { color: '#00EEFF' } },
      { name: '山西', value: [112.578781, 37.813948], itemStyle: { color: '#00EEFF' } },
      { name: '福建', value: [119.296194, 26.101082], itemStyle: { color: '#00EEFF' } },
      { name: '浙江', value: [120.152575, 30.266619], itemStyle: { color: '#00EEFF' } },
      { name: '江苏', value: [118.763563, 32.061377], itemStyle: { color: '#00EEFF' } },
      { name: '北京', value: [116.407387, 39.904179], itemStyle: { color: '#A6283F' } },
      { name: '陕西', value: [108.953939, 34.266611], itemStyle: { color: '#00EEFF' } },
      { name: '广东', value: [113.266887, 23.133306], itemStyle: { color: '#00EEFF' } }
    ];
    const linesData = [
      { coords: [[116.407387, 39.904179], [87.628579, 43.793301]] },
      { coords: [[116.407387, 39.904179], [104.076452, 30.651696]] },
      { coords: [[116.407387, 39.904179], [113.753094, 34.767052]] },
      { coords: [[116.407387, 39.904179], [112.578781, 37.813948]] },
      { coords: [[116.407387, 39.904179], [119.296194, 26.101082]] }
    ];
    const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

    onMounted(() => {
      if (mapEcharts.value) {
        const charts = echarts.init(mapEcharts.value);
        echarts.registerMap('china', china);
        const option = {
          geo: {
            roam: true,
            scaleLimit: { min: 1, max: 6 },
            zoom: 1.3,
            map: 'china',
            label: {
              normal: { show: true, textStyle: { color: '#fff' } },
              emphasis: { textStyle: { color: '#fff' } }
            },
            itemStyle: {
              normal: {
                borderColor: '#5089EC',
                borderWidth: 1,
                areaColor: {
                  colorStops: [
                    { offset: 0, color: 'rgba(0,102,154,0)' },
                    { offset: 1, color: 'rgba(0,102,154,0.4)' }
                  ]
                }
              },
              emphasis: { areaColor: '#2386AD', borderWidth: 0 }
            },
            backgroundColor: '#181c20'
          },
          series: [
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              effectType: 'ripple',
              showEffectOn: 'render',
              rippleEffect: { period: 10, scale: 4, brushType: 'stroke' },
              zlevel: 1,
              data: mappoints
            }
          ]
        };
        charts.setOption(option);
        window.addEventListener('resize', () => charts.resize());

        // 监听点击事件
        charts.on('click', function(params) {
          if (params.seriesType === 'effectScatter') {
            const point = mappoints.find(item => item.name === params.name);
            if (point) {
              popupData.name = point.name;
              popupData.deviceCount = point.deviceCount || 0;
              popupData.lng = point.value[0];
              popupData.lat = point.value[1];
              popupData.address = point.address || '';
              popupData.health = point.health || '';
              popupVisible.value = true;
            }
          }
        });
      }
      if (trendChart.value) {
        const chart = echarts.init(trendChart.value);
        const option = {
          backgroundColor: 'transparent',
          grid: { left: 40, right: 20, top: 30, bottom: 30 },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            axisLine: { lineStyle: { color: '#3a4664' } },
            axisLabel: { color: '#8fa4c9' }
          },
          yAxis: {
            type: 'value',
            splitLine: { lineStyle: { color: 'rgba(90,120,180,0.15)' } },
            axisLine: { lineStyle: { color: '#3a4664' } },
            axisLabel: { color: '#8fa4c9' }
          },
          series: [
            {
              name: '接入人数',
              type: 'line',
              data: [12, 18, 25, 32, 26, 24, 15],
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: { color: '#3ecbff', width: 3 },
              itemStyle: { color: '#3ecbff', borderColor: '#fff', borderWidth: 2 },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(62,203,255,0.25)' },
                  { offset: 1, color: 'rgba(62,203,255,0)' }
                ])
              }
            }
          ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
      }
      if (onlineChart.value) {
        const chart = echarts.init(onlineChart.value);
        const option = {
          backgroundColor: 'transparent',
          grid: { left: 40, right: 20, top: 30, bottom: 30 },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            axisLine: { lineStyle: { color: '#3a4664' } },
            axisLabel: { color: '#8fa4c9' }
          },
          yAxis: {
            type: 'value',
            splitLine: { lineStyle: { color: 'rgba(90,120,180,0.15)' } },
            axisLine: { lineStyle: { color: '#3a4664' } },
            axisLabel: { color: '#8fa4c9' }
          },
          series: [
            {
              name: '在线时长',
              type: 'line',
              data: [2, 4, 5, 8, 6, 4, 1],
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: { color: '#3ecbff', width: 3 },
              itemStyle: { color: '#3ecbff', borderColor: '#fff', borderWidth: 2 },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(62,203,255,0.25)' },
                  { offset: 1, color: 'rgba(62,203,255,0)' }
                ])
              }
            }
          ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
      }
      if (delayChart.value) {
        const chart = echarts.init(delayChart.value);
        const option = {
          backgroundColor: 'transparent',
          grid: { left: 40, right: 20, top: 30, bottom: 30 },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            axisLine: { lineStyle: { color: '#3a4664' } },
            axisLabel: { color: '#8fa4c9' }
          },
          yAxis: {
            type: 'value',
            splitLine: { lineStyle: { color: 'rgba(90,120,180,0.15)' } },
            axisLine: { lineStyle: { color: '#3a4664' } },
            axisLabel: { color: '#8fa4c9' }
          },
          series: [
            {
              name: '时延达标率',
              type: 'line',
              data: [94, 96, 92, 95, 93, 97, 92],
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: { color: '#3ecbff', width: 3 },
              itemStyle: { color: '#3ecbff', borderColor: '#fff', borderWidth: 2 },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(62,203,255,0.25)' },
                  { offset: 1, color: 'rgba(62,203,255,0)' }
                ])
              }
            }
          ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
      }
      if (lossChart.value) {
        const chart = echarts.init(lossChart.value);
        const option = {
          backgroundColor: 'transparent',
          grid: { left: 40, right: 20, top: 30, bottom: 30 },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            axisLine: { lineStyle: { color: '#3a4664' } },
            axisLabel: { color: '#8fa4c9' }
          },
          yAxis: {
            type: 'value',
            splitLine: { lineStyle: { color: 'rgba(90,120,180,0.15)' } },
            axisLine: { lineStyle: { color: '#3a4664' } },
            axisLabel: { color: '#8fa4c9' }
          },
          series: [
            {
              name: '丢包达标率',
              type: 'line',
              data: [93, 94, 92, 95, 93, 95, 90], // 您可以根据实际数据修改这里
              smooth: true,
              symbol: 'circle',
              symbolSize: 8,
              lineStyle: { color: '#3ecbff', width: 3 }, // 样式与上面图表保持一致
              itemStyle: { color: '#3ecbff', borderColor: '#fff', borderWidth: 2 },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(62,203,255,0.25)' },
                  { offset: 1, color: 'rgba(62,203,255,0)' }
                ])
              }
            }
          ]
        };
        chart.setOption(option);
        window.addEventListener('resize', () => chart.resize());
      }
    });

    return { mapEcharts, trendChart, onlineChart, delayChart, lossChart, popupVisible, popupData };
  }
}
</script>

<style scoped>
.site-center-root {
  background: url('@/assets/bg.jpg') no-repeat 0 0 / cover, #181c20;
  color: #fff;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.center-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.left-panel {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 0 16px;
}
.card {
  background: linear-gradient(135deg, #23272b 80%, #2a2e35 100%);
  border-radius: 10px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.card-title {
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  margin-bottom: 6px;
}
.card-stats {
  font-size: 13px;
  color: #fff;
  margin-bottom: 6px;
  display: flex;
  gap: 18px;
}
.trend-chart {
  width: 100%;
  height: 120px;
  min-width: 180px;
}
.map-panel {
  flex: 1;
  position: relative;
  margin: 0 16px 16px 16px;
  background: transparent;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: calc(100vh - 100px);
}
.top-stats-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #23272b;
  padding: 10px 0;
  font-size: 20px;
  border-radius: 8px;
  margin: 16px 16px 12px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.stat-item {
  margin: 0 30px;
  text-align: center;
}
.stat-item span {
  font-size: 14px;
  color: #aaa;
}
.stat-item.highlight {
  color: #ffb300;
}
.stat-item.error {
  color: #ff3b3b;
}
.map-echarts {
  width: 100%;
  height: 100%;
  min-height: 600px;
  border-radius: 8px;
  background: transparent;
}
.site-popup {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(30, 34, 40, 0.95);
  border-radius: 8px;
  padding: 16px 24px;
  color: #fff;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 2;
}
.arrow-tip {
  position: absolute;
  right: 60px;
  bottom: 40px;
  color: #ffe066;
  font-size: 20px;
  font-weight: bold;
  z-index: 3;
  text-align: center;
  line-height: 1.3;
  transform: rotate(-20deg);
}

@media (max-width: 900px) {
  .center-content {
    flex-direction: column;
  }
  .left-panel, .map-panel {
    width: 100%;
    min-width: 0;
    margin: 0;
  }
}
</style>
